<template>
  <div>
    <div class="w" v-if="detailsLists">
      <div :class="['header-det',{'con':scrollTop>=400}]">

        <router-link to="/homeView" tag="div" class="return">
          <a href="#">
            <span :class="['iconfont','icon-jiantouzuo',{'spanblack':scrollTop<=400}]" @click="signOut"></span>
          </a>
        </router-link>

        <div class="name-user" v-show="scrollTop>=500">
          <div class="img">
            <img :src="detailsLists[0].touxiang" width="42px" alt="" />
          </div>
          <div class="user-name">
            <p>{{ detailsLists[0].userName }}</p>
            <p>08-30</p>
          </div>
        </div>

        <div class="guanzhu" v-show="scrollTop>=500">
          <button>关注</button>
        </div>

        <div class="more">
          <a href="#">
            <span :class="['iconfont','icon-qita',{'spanblack':scrollTop<=400}]"></span>
          </a>
        </div>
      </div>

      <div class="header-img" @scroll="gundong">
        <img :src="detailsLists[0].foodImg" width="100%" alt="" />
      </div>

      <div class="title">
        <h2>{{ detailsLists[0].foodName }}</h2>
      </div>

      <div class="score" v-if="details">
        <div class="score-h">
          <p>下厨房综合评分</p>
        </div>
        <div class="score-f">
          <div class="score-num">
            <p>{{ details[0].score.fraction }}</p>
            <p>{{ detailsLists[0].renshu }}人做过</p>
          </div>
          <div class="score-strip">
            <div class="strip">
              <div class="strip-father">
                <div
                  class="strip-son"
                  :style="{ width: details[0].score.rightOn }"
                ></div>
              </div>
              <span>好极了</span>
            </div>
            <div class="strip">
              <div class="strip-father">
                <div
                  class="strip-son"
                  :style="{ width: details[0].score.veryGood }"
                ></div>
              </div>
              <span>挺好</span>
            </div>
            <div class="strip">
              <div class="strip-father">
                <div
                  class="strip-son"
                  :style="{ width: details[0].score.commonly }"
                ></div>
              </div>
              <span>一般</span>
            </div>
          </div>
        </div>
      </div>

      <div class="author">
        <div class="user">
          <div class="img">
            <img :src="detailsLists[0].touxiang" width="42px" alt="" />
          </div>
          <div class="user-name">
            <p>{{ detailsLists[0].userName }}</p>
            <p>08-30</p>
          </div>
        </div>
        <div class="follow">
          <button>关注</button>
        </div>
      </div>

      <div class="materials">
        <div class="materials-son">用料</div>
        <div class="materials-btn">
          <!-- js功能 -->
          <button @click="showPopup">换算</button>
          <van-popup
            v-model="show"
            position="bottom"
            :style="{ height: '40%' }"
          >
            <conversion-data @fanhui="fanhui"></conversion-data>
          </van-popup>
        </div>
      </div>

      <div class="material" v-if="details">
        <ul>
          <li class="main">材料</li>
          <li v-for="(item, index) in details[0].materials.food" :key="index">
            <span v-for="k in item" :key="k">{{ k }}</span>
          </li>
        </ul>
        <ul>
          <li class="main">调料</li>
          <li
            v-for="(item, index) in details[0].materials.condiment"
            :key="index"
          >
            <span v-for="k in item" :key="k">{{ k }}</span>
          </li>
        </ul>
      </div>

      <div class="step" v-if="details">
        <ul>
          <li v-for="(item, index) in details[0].step" :key="index">
            <div class="step-title con">
              <p>{{ item.name }}</p>
            </div>
            <div class="step-img">
              <img :src="item.picture" alt="" />
            </div>
            <div class="step-describe">
              <p>{{ item.describe }}</p>
            </div>
          </li>
        </ul>
        <div class="times">
          <p>菜谱创建时间：{{ details[0].menuTimes }}</p>
        </div>
      </div>

      <div id="upload" class="upload" v-if="details">
        <div class="upload-title">大家上传的作品</div>
        <div class="upload-works">
          <ul>
            <li v-for="item in details[0].upload" :key="item.uploadId">
              <div class="works-user">
                <div class="yonghu">
                  <div class="img">
                    <img :src="item.touxiang" height="35" alt="" />
                  </div>
                  <div class="texts">
                    <p>{{ item.username }}</p>
                    <p>{{ item.times }}</p>
                  </div>
                </div>
                <div class="fabulous">
                  <p>
                    <span
                      class="iconfont icon-dianzan"
                      style="font-size: 20px"
                    ></span>
                    {{ item.fabulous }}
                  </p>
                </div>
              </div>
              <div class="works-food">
                <div class="describe">{{ item.describe }}</div>
                <div class="pic">
                  <img :src="item.works" width="100%" />
                </div>
              </div>
            </li>
            <router-link
              :to="'/allWorksView?id=' + listId"
              tag="li"
              class="works-btn"
            >
              全部作品
            </router-link>
          </ul>
        </div>
      </div>

      <div class="comment" v-if="details">
        <div class="comment-title">这道菜的评论</div>
        <div class="own">
          <div class="img">
            <img src="../assets/img/touxiang.jpg" width="38" alt="" />
          </div>
          <div class="inputs">
            <input type="text" placeholder="喜欢评论的人，做饭一定很好吃~" />
          </div>
        </div>
        <ul>
          <li v-for="item in details[0].comment" :key="item.commentId">
            <div class="comment-top">
              <div class="comment-user">
                <div class="img">
                  <img :src="item.touxiang" width="34" alt="" />
                </div>
                <div class="username">
                  <p>{{ item.username }}</p>
                  <p>{{ item.times }}</p>
                </div>
              </div>
              <div class="comment-fabulous">
                {{ item.fabulous }}
                <span
                  class="iconfont icon-dianzan"
                  style="font-size: 20px"
                ></span>
              </div>
            </div>

            <div class="comment-botton">
              <div class="comment-txt">{{ item.texts }}</div>
              <ol>
                <li v-for="(k, i) in item.others" :key="i">
                  <div class="others">
                    <div class="others-user">{{ k.name }}</div>
                    <div class="others-fabulous">
                      {{ k.fabulous }}
                      <span
                        class="iconfont icon-dianzan"
                        style="font-size: 20px"
                      ></span>
                    </div>
                  </div>
                  <div class="others-txt">{{ k.othersTexts }}</div>
                </li>
              </ol>
              <div class="see-more">查看更多（2）</div>
            </div>
          </li>
        </ul>
      </div>

      <div class="tail">
        <ul>
          <li  @click="shoucang(details[0].id)">
            <a>
              <div class="img">
                <span :class="['iconfont',{'icon-shoucang':!shoucangFlag},{'icon-shoucang1':shoucangFlag}]"></span>
              </div>
              <p>2.4万</p>
            </a>
          </li>
          <li>
            <a href="#upload">
              <div class="img">
                <span class="iconfont icon-qipao"></span>
              </div>
              <p>25</p>
            </a>
          </li>
          <li>
            <a>
              <div class="img">
                <span class="iconfont icon-xiangji"></span>
              </div>
              <p>传作品</p>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { recommendData } from "../api/home.js";
import { detailsData } from "../api/details.js";
import conversionData from "../components/conversionData.vue";
export default {
  data() {
    return {
      detailsLists: null,
      listId: null,
      details: null,
      show: false,
      scrollTop:null,
      shoucangFlag:false,
      shoucangLists:[]
    };
  },
  methods: {
    signOut() {
      this.$emit("signOut");
    },
    showPopup() {
      this.show = true;
    },
    fanhui() {
      this.show = false;
    },
    gundong(event) {
      this.scrollTop =
        event.target.documentElement.scrollTop || event.target.body.scrollTop;
    },
    shoucang(id){
      console.log(5);
      this.shoucangFlag=!this.shoucangFlag
      // window.localStorage.setItem("shoucangFlag", JSON.stringify(this.shoucangFlag));
      if(this.shoucangFlag){
        this.shoucangLists.push(this.details[0])
        window.localStorage.setItem("shoucangLists", JSON.stringify(this.shoucangLists));
        this.$emit("shoucang",[this.shoucangFlag,id])
      }else{
        this.shoucangLists=[]
        this.$emit("shoucang",[this.shoucangFlag,id])
      }
    }
  },
  mounted(){
    window.addEventListener("scroll",this.gundong)
  },
  created(){
    // this.shoucangFlag=JSON.parse(window.localStorage.getItem("shoucangFlag"))
    this.listId = this.$route.query.id;
    recommendData().then((data) => {
      this.detailsLists = data.recommendLists.filter((item) => {
        return item.id == this.listId;
      });
    });

    detailsData().then((data) => {
      this.details = data.details.filter((item) => {
        return item.id == this.listId;
      });
    });

    this.shoucangFlag=JSON.parse(this.$route.query.zhuantai)
  },
  components: { conversionData },
};
</script>

<style>
@import "../assets/css/public.css";
@import "../assets/css/details.css";
</style>